import React, { useState, useEffect } from 'react'
import { List, Icon, Button, Input } from 'antd';
import './FileList.css'
import PropTypes from 'prop-types'
import {getParentNode} from '../utils/FlattenState'

import useContextMenu from '../hooks/useContentsMenu'

const { remote } = window.require('electron')
const { Menu, MenuItem } = remote


const FileList = ({ files, onFileClick, onFileDelete, onUpdateFile }) => {
    const [editStatus, setEditStatus] = useState(false)
    const [value, setValue] = useState('')

    const clickItem =useContextMenu([
        {
            label: '打开',
            click: () => {
                const parentElement=getParentNode(clickItem.current,'ant-list-item') //调用节点冒泡方法 拿到当前点击的节点属性
                if(onFileClick){
                    onFileClick(parentElement.dataset.id)
                }
            }
        },
        {
            label: '重命名',
            click: () => {
                console.log(clickItem);
            }
        },
        {
            label: '删除',
            click: () => {
                console.log(clickItem);
            }
        },
    ],'.ant-list')



    const handleInputOnPress = (id, e) => { //修改文件名
        setEditStatus(!editStatus)          //切换状态
        onUpdateFile(id, e.target.value)  //此函数是 给父组件发送值
    }

    return (
        <>
            <List
                itemLayout="horizontal"
                size="small"
                dataSource={files}
                renderItem={item => (
                    <List.Item
                        onClick={() => { onFileClick(item.id) }}
                        data-id={item.id}   /* 给dome增加属性*/
                        data-title={item.title}

                    >
                        <div className="icons-list">
                            <Icon type="file-markdown" />
                        </div>
                        {/* 假如没点击编辑显示的页面 */}
                        {(item.id !== editStatus) &&
                            <>
                                <div className="file-list-title">
                                    <span>{item.title}</span>
                                </div>
                                <div className="file-list-btn">
                                    <Button
                                        type="primary"
                                        size='small'
                                        icon="edit"
                                        onClick={() => { setEditStatus(item.id); setValue(item.title); }}>
                                    </Button>
                                    <Button type="danger" size='small' icon="delete" onClick={() => { onFileDelete(item.id) }}></Button>
                                </div>
                            </>
                        }
                        {(item.id == editStatus) &&
                            <>
                                <Input
                                    placeholder='修改文件内容'
                                    onPressEnter={(e) => { handleInputOnPress(item.id, e) }}
                                    allowClear
                                />
                            </>
                        }
                    </List.Item>
                )}

            />
        </>
    )

}

//数据类型检测
FileList.protoTypes = {
    files: PropTypes.array,
    onFileClick: PropTypes.func,
    onFileDelete: PropTypes.func,
}

export default FileList